<template>
    <div v-loading="pageLoading" class="page">
        <div class="padding" v-if="list.length>0">
            <div class="bg-white padding radius-lg margin-bottom" v-for="item in list" :key="item.id">
                <div class="text-bold">{{item.start}} ~ {{item.end}}</div>
                <div class="list">
                    <div class="padding" v-for="(matrix,index) in item.matrix" :key="index">
                        <div class="padding radius-xl text-center"
                            :class="matrix.state == 0 ? 'bg-success' : 'bg-gray'">
                            {{ matrix.time }}
                            <div class="text-xs" v-if="matrix.state == 0">预约</div>
                            <div class="text-xs" v-else-if="matrix.state == 2">已预约</div>
                            <div class="text-xs" v-else-if="matrix.state == 1">无</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<div class="flex flex-direction justify-center" v-else>
			<el-empty description="暂无排班"></el-empty>
		</div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            pageLoading:false,
            list:[]
        }
    },
    created() {
        this.getList();
    },
    methods:{
        getList(){
            this.pageLoading=true;
            this.list=[];
            this.$http.useGet(location.pathname+"TechnicianScheduling/index", {
                technician_id: this.$route.query.id
            }).then(res => {
                const data=res.data;
                for (let i = 0; i < data.length; i++) {
                    const item = data[i];
                    item.start_date=new Date(item.start_time.replace(/-/g,'/'));
                    item.end_date=new Date(item.end_time.replace(/-/g,'/'));
                    item.start=`${this.getDayName(item.start_date)} ${item.start_date.getHours().toString().padStart(2, '0')}:${item.start_date.getMinutes().toString().padStart(2, '0')}`;
                    item.end=`${this.getDayName(item.end_date)} ${item.end_date.getHours().toString().padStart(2, '0')}:${item.end_date.getMinutes().toString().padStart(2, '0')}`;
                    for (let j = 0; j < item.matrix.length; j++) {
                        const matrix = item.matrix[j];
						matrix.date = new Date(matrix.start_time.replace(/-/g, '/'));
                        matrix.time = matrix.date.getHours().toString().padStart(2, '0') + ':' + matrix.date.getMinutes().toString().padStart(2, '0');
                        item.matrix[j]=matrix
                    }
                    this.list.push(item);
                }
            }).finally(()=>{
                this.pageLoading=false
            })
        },
        getDayName(d) {
            const now = d.getTime();
            const start = new Date();
            start.setHours(0, 0, 0, 0);
            const end = new Date();
            end.setHours(23, 59, 59, 999);
            switch (true) {
                case now >= start.getTime() && now <= end.getTime():
                    return '今天';
                case now >= start.getTime() + 86400000 && now <= end.getTime() + 86400000:
                    return '明天';
                case now >= start.getTime() + 172800000 && now <= end.getTime() + 172800000:
                    return '后天';
                default:
                    return (d.getMonth() + 1) + '月' + d.getDate() + '日';
            }
        }
    }
}
</script>
<style>
.page {
    height: 100%;
    overflow-y: scroll;
}
.padding{
    padding:10px;
}
.radius-lg{
    border-radius:6px;
}
.radius-xl{
    border-radius:12px;
}
.list {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0px, 1fr));
    text-align:center;
}

.list .bg-gray {
    background-color: var(--el-bg-color-page);
    color: var(--el-text-color-disabled);
}

.list .bg-success {
    background-color: var(--el-color-success-light-9);
    color: var(--el-color-success);
}
.margin-bottom{
    margin-bottom:10px;
}
</style>